@import '../compact.theme.less';
@portal-header: 60px;
@portal-header-v2: 60px;

#moduleLayout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .header-content {
    width: 100%;
    height: @portal-header;
    position: absolute;
    top: 0;
    left: 0;
  }

  .body-content {
    width: 100%;
    height: calc(100vh - @portal-header);
    position: absolute;
    bottom: 0;
    left: 0;
    perspective: 700px;
    // background: #acacac;
    background: #eee;


    .track {
      display: block;
      position: relative;
      width: 200%;
      height: 100%;
      left: 0;
      transform-style: preserve-3d;
      transition: left .3s ease-in .3s;

      &.module {
        left: 0;
      }

      &.card {
        left: -100%;
      }

      section.flip-page {
        position: relative;
        display: block;
        float: left;
        width: 50%;
        height: 100%;
        background: #fff;
        transform: scale(0.7) rotateX(10deg);
        transform-origin: 100% left;
        transform-style: preserve-3d;
        transition: transform .3s ease-in;
        box-shadow: 0 0 5px #fff;

        &.opend {
          transform: scale(1) rotateX(0deg);
        }
      }

    }
  }

  &.Version2 {
    .header-content {
      height: @portal-header-v2;
    }

    .body-content {
      height: calc(100vh - @portal-header-v2);
    }
  }

}